<template>
  <div
    class="tableBody"
    :class="defTableClass"
    :style="{ height: tableHeight }"
  >
    <el-table
      :ref="tableRef"
      :data="pageData.list"
      border
      stripe
      style="width: 100%"
      v-loading="loading"
      :row-class-name="tbStyle"
      :header-cell-style="{ background: '#f3f4f6' }"
      class="tbClass"
    >
      <slot></slot>
    </el-table>

    <div class="tbPagination">
      <el-pagination
        :disabled="loading"
        background
        layout="sizes, prev, pager, next, jumper,total"
        :page-sizes="[1,10, 20, 30, 40]"
        :page-size="pageData.size"
        :current-page="pageData.page"
        :total="pageData.total"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>

import {
  onMounted,
  ref,
  reactive,
  toRefs,
  watch,
  getCurrentInstance,
} from "vue";
const { proxy } = getCurrentInstance();

//父组件传入参数
const props = defineProps({
  tableRef:{
    type: String,
    default: "tableRef",
  },
  loading: {
    type: Boolean,
    default: false,
  },
  pageData: {
    type: Object,
    default: () => ({
      list: [],
      size: 10,
      page: 1,
      total: 0,
    }),
  },
  tableHeight: {
    type: String,
    default: "calc(100vh - 260px)",
  },
  defTableClass: {
    type: String,
    default: "",
  },
});

function pageSizeChange(val) {
  // console.log(`每页 ${val} 条`);
  // pageData.size = val;
  // getList();
  emit("pageSizeChange", val);
}

function pageCurrentChange(val) {
  // console.log(`当前页: ${val}`, pageData);
  // pageData.page = val;
  // getList();
  emit("pageCurrentChange", val);
}
function tbStyle({ row, rowIndex }, className) {
  // console.log("row: ", row, "rowIndex: ", rowIndex,"className: ", className);
  if (className) {
    return className;
  } else {
    return "tb-header-row";
  }
}

//向父组件发送事件
const emit = defineEmits(["pageSizeChange", "pageCurrentChange"]);

//向外暴露方法
defineExpose({
  tbStyle,
});
</script>

<style lang="scss" scoped>
@use "@/common";
</style>